<template>
  <el-dialog
    :title="setep === 1 ? '设置用电参数' : '设置进度'"
    :visible="open"
    :before-close="onClose"
    append-to-body
    width="600px"
  >
    <template v-if="setep === 1">
      <el-form
        :model="form"
        ref="form"
        size="small"
        :inline="false"
        label-width="100px"
        :rules="rules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="已选房间" prop="currentRoom">
              <el-select v-model="currentRoom" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in options"
                  :key="item.roomId"
                  :label="item.roomNo"
                  :value="item.roomId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总功率" prop="maxZgl">
              <el-input v-model="form.maxZgl" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="阻性功率" prop="maxZxgl">
              <el-input v-model="form.maxZxgl" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上电功率" prop="maxSdgl">
              <el-input v-model="form.maxSdgl" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="感性功率" prop="maxGxgl">
              <el-input v-model="form.maxGxgl" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="锁死次数" prop="maxLockCn">
              <el-input v-model="form.maxLockCn" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="延迟时间1" prop="delayTm1">
              <el-input v-model="form.delayTm1" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="延迟时间2" prop="delayTm2">
              <el-input v-model="form.delayTm2" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="延迟时间3" prop="delayTm3">
              <el-input v-model="form.delayTm3" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <div v-else v-loading="loading">
      <div style="text-align: center;padding-bottom: 10px">
        设置完成，总数：
        <span style="color: red">{{success + error}}</span>，成功：
        <span style="color: red">{{success}}</span>，失败：
        <span style="color: red">{{error}}</span>
      </div>
      <el-table :data="setList">
        <el-table-column type="index" width="55" align="center" />
        <el-table-column label="房间号" align="center" prop="roomNo" />
        <el-table-column label="电表号" align="center" prop="meterNo" />
        <el-table-column label="设置状态" align="center" prop="status">
          <template slot-scope="scope">{{scope.row.status == 0 ? '成功' : '失败'}}</template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer">
      <template v-if="setep === 1">
        <el-button size="small" @click="onClose">取消</el-button>
        <el-button size="small" type="primary" @click="submitData">确定</el-button>
      </template>
      <template v-else>
        <el-button size="small" @click="onClose">完成</el-button>
      </template>
    </div>
    <ResultStatuListModal ref="ResultStatuListModal" @refresh="$emit('refresh')" />
  </el-dialog>
</template>

<script>
import ResultStatuListModal from "@/components/ResultStatuListModal.vue";
import { ueSet } from "@/api/param/eq";
export default {
  data() {
    return {
      open: false,
      form: {},
      rules: {},
      setep: 1,
      loading: false,
      setList: [],
      roomIds: [],
      roomList: [],
      options: [],
      currentRoom: null
    };
  },
  computed: {
    success() {
      return this.setList?.filter(item => item.status == 0).length || 0;
    },
    error() {
      return this.setList?.filter(item => item.status == 1).length || 0;
    }
  },
  methods: {
    show(roomIds, roomList, selection) {
      Object.keys(selection[0]).map(key => {
        // this.form[key] = selection[0][key]
        this.$set(this.form, key, selection[0][key]);
      });
      this.open = true;
      this.roomIds = roomIds;
      this.roomList = roomList;
      this.options = selection;
      this.currentRoom = selection[0].roomId;
    },
    onClose() {
      this.form = {};
      this.open = false;
      this.setep = 1;
    },
    submitData() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$refs.ResultStatuListModal.show({
            title: "您确定要设置数据？",
            actionName: "设置",
            total: this.options.length,
            handler: onItemOver =>
              ueSet(
                this.roomIds.map(id => {
                  return {
                    ...(this.options.find(item => item.roomId == id) || {}),
                    ...this.form,
                    roomId: id
                  };
                }),
                onItemOver
              )
          });
        }
      });
    }
  }
};
</script>